<template>
  <p>App</p>
  <p>{{ count }}</p>
  <button @click="count++">+</button>
  <button @click="handleClick">+</button>
</template>

<script lang="ts">
import { reactive, ref } from "vue";

export default {
  name: "App",
  // 组合式API入口，所有组合式API的内容都必须写在这个函数中
  // setup初始化渲染就会触发，相当于（取缔） beforeCreate 和 created
  setup() {
    console.log("setup", this); // this 是 undefined

    /*
      ref 通常用来定义基本数据类型
          当用它定义引用数据类型，实际通过reactive定义的
      reactive 只能用来定义引用数据类型
              定义基本数据类型会报错，同时数据也不是响应式的
      结论：
        1. 基本数据类型用ref定义，引用数据类型用reactive定义
        2. 表单数据用reactive定义，其他数据用ref定义
    */

    // 1. 功能1
    // ref(数据初始化值)
    // ref 在模板页面使用是直接使用，在setup函数中是一个对象，需要通过 .value 去操作值
    const count = ref(0);

    const handleClick = () => {
      count.value++;
    };

    // 2. 功能2
    interface Person {
      id: number;
      name: string;
    }
    type Persons = Person[];

    const persons = ref<Persons>([]);

    const addPerson = () => {
      persons.value.push({
        id: 1,
        name: "jack",
      });
    };

    // reactive 主要用来定义对象类型
    const dog = reactive({
      name: "来福",
      category: "中华田园犬",
    });

    const updateDog = () => {
      dog.name = "旺财";
    };

    // 将模板页面需要使用数据暴露出去，模板页面才能访问
    // 对象中所有内容，模板页面都能访问
    return {
      count,
      handleClick,
      persons,
      addPerson,
      dog,
      updateDog,
    };
  },
};
</script>
